<template>
	<view class="leisurely-box" >

		<view class="leisurely  text-grey" 
			@click.stop="jumpLeisurely"
		>
			<view class="leisurely-img">
				<image class="img" :src="spu.productIcon" mode="aspectFill"></image>
			</view>
			<view class="leisurely-info">
				<view class="main-hd">
					<view class="title text-cut">
						{{spu.scenName}}
					</view>
					<view class='cu-tag bg-cyan round sm'>{{spu.scenNum}}人本</view>
				</view>
				<view class="sub-hd">
					<view class="text-price">
						{{spu.productDiscountPrice}}
					</view>
					<view class="user">
						<image :src="spu.headurl" mode="aspectFill" class="avatar" />
						<text  class="nickname text-cut">{{spu.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Viewleisurely',
		computed:{
		},
		props: {
			spu: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		methods:{
			jumpLeisurely() {
				this.$jumpPages('scenIdle', {
					productId:	this.spu.productId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leisurely-box{
		background-color: #FFFFFF;
		border-radius: 16rpx; 
		position: relative;

		.leisurely{
			.leisurely-img{
				width: 100%;
				height: 457rpx;
				.img{
					width: 100%;
					height: 457rpx;
					border-radius: 16rpx  16rpx 0 0; 
				}
			}
			.leisurely-info{
				min-height: 130rpx;
				padding: 20rpx;
				line-height: 1;
			}
			.main-hd{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #333333;
			}
			.sub-hd{
				padding-top: 20rpx;
				line-height: 1.4;
				display: flex;
				align-items: center;
			}
			.title{
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				margin-right: 20rpx;
				max-width: 180rpx;
			}
			.text-price{
				color: #E42C2C;
				font-size: 24rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.user{
				display: flex;
				align-items: center;
				flex: 1;
				justify-content: flex-end;
				width: 0;
			}
			.avatar{
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				flex-shrink: 0;
			}
			.nickname{
				color: #909090;
				font-size: 20rpx;
			}
		}
		
	}
</style>
